<template>
  <div class="app-container">
    <!-- 模拟考试 -->
    <div v-if="isPage" v-loading="loading">
      <div class="backgroundClass">
        <span class="title_fontSize">{{ title_name }}</span>
      </div>
      <div style="margin-top: 24px; display: flex">
        <div
          class="page_code"
          style="
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-right: 24px;
          "
          @click="
            () => {
              (this.isPage = !this.isPage), (this.ksInfo = '');
            }
          "
        >
          <div style="height: 40px; line-height: 40px; display: flex">
            <img
              src="@/assets/littleIcon/monikaoshi.png"
              alt=""
              style="height: 100%; display: block; margin-right: 12px"
            />
            <span style="font-size: 18px; color: #175dff; font-weight: 600"
              >开始考试</span
            >
          </div>
        </div>
        <div class="page_code" style="margin-right: 24px">
          <div style="padding: 24px; display: flex; flex: 1">
            <p style="height: 40px; margin: 0">
              <img
                src="@/assets/littleIcon/moni2.png"
                alt=""
                style="height: 100%; margin-right: 12px"
              />
            </p>
            <span>
              <span style="font-size: 16px; line-height: 40px; color: #333"
                >我的试卷</span
              >
              <div style="font-size: 14px; color: #999">
                记录测试过的试卷，可查看复卷
              </div>
            </span>
          </div>
          <div class="button_box">
            <span style="border-right: 1px solid #d8d8d8" @click="open_sj"
              >查看试卷</span
            >
            <span></span>
          </div>
        </div>
        <div class="page_code" style="margin-right: 24px">
          <div style="padding: 24px; display: flex; flex: 1">
            <p style="height: 40px; margin: 0">
              <img
                src="@/assets/littleIcon/moni8.png"
                alt=""
                style="height: 100%; margin-right: 12px"
              />
            </p>
            <span>
              <span style="font-size: 16px; line-height: 40px; color: #333"
                >我的错题</span
              >
              <div style="font-size: 14px; color: #999">
                统计做题过程中答题的题，可进行单独练习
              </div>
            </span>
          </div>
          <div class="button_box">
            <span style="border-right: 1px solid #d8d8d8" @click="ctsj"
              >开始考试</span
            >
            <span @click="clearwrong">清除错题库</span>
          </div>
        </div>
        <div class="page_code">
          <div style="padding: 24px; display: flex; flex: 1">
            <p style="height: 40px; margin: 0">
              <img
                src="@/assets/littleIcon/moni3.png"
                alt=""
                style="height: 100%; margin-right: 12px"
              />
            </p>
            <span>
              <span style="font-size: 16px; line-height: 40px; color: #333"
                >收藏试题</span
              >
              <div style="font-size: 14px; color: #999">
                统计做题过程标记的题，可进行单独练习
              </div>
            </span>
          </div>
          <div class="button_box">
            <span style="border-right: 1px solid #d8d8d8" @click="scsj"
              >开始考试</span
            >
            <span @click="clearSc">清除收藏库</span>
          </div>
        </div>
      </div>
    </div>
    <div class="backgroundClass" v-else>
      <div class="titleBox">
        <el-page-header
          @back="
            () => {
              this.isPage = !this.isPage;
            }
          "
          :content="title_name"
        >
        </el-page-header>
      </div>
      <div class="content-box">
        <div class="content-title">
          <div class="img_box">
            <img src="@/assets/logo/logo.png" alt="" />
            <div class="span">
              {{ nickname }}
            </div>
          </div>
          <div class="content-box-title">
            <span> 考前模拟，快速通过 </span>
          </div>
        </div>
        <el-form label-position="left" label-width="73px" class="form">
          <el-form-item label="考试科目:" class="noneMargin">
            <el-select v-model="subject" placeholder="请选择" disabled>
              <el-option
                v-for="item in userinfor"
                :key="item.id"
                :label="item.subjectTitle"
                :value="item.subject_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="考试标准:"
            class="noneMargin"
            v-if="obj.考试时长"
          >
            <span>
              {{ obj.考试时长.时长 }}分钟，{{
                Number(obj.试题分布.单选.数量) +
                Number(obj.试题分布.多选.数量) +
                Number(obj.试题分布.判断.数量)
              }}题
            </span>
          </el-form-item>
          <el-form-item
            label="合格标准:"
            class="noneMargin"
            v-if="obj.考试时长"
          >
            <span>
              {{ obj.分值标准.及格 }}分及格(满分{{
                Number(obj.试题分布.单选.总分) +
                Number(obj.试题分布.多选.总分) +
                Number(obj.试题分布.判断.总分)
              }}分)
            </span>
          </el-form-item>
          <el-form-item label="出题方式:" v-if="!ksInfo">
            <el-select v-model="form" placeholder="请选择">
              <el-option
                label="人工组卷"
                value="人工组卷"
                v-if="obj.人工组卷 && obj.人工组卷 == '开启'"
              >
              </el-option>
              <el-option label="未答题优先" value="未答题优先"> </el-option>
              <el-option label="随机出题" value="随机出题"> </el-option>
              <el-option label="错题优先" value="错题优先"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="答案提示:" v-if="isMeaxr == '开启'">
            <el-select v-model="value" placeholder="请选择">
              <el-option label="不显示答案" value="不显示"> </el-option>
              <el-option label="显示答案" value="显示"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题库类型:" v-if="isShowJX">
            <el-select v-model="pool" placeholder="请选择">
              <el-option label="全部题库" value=""> </el-option>
              <el-option label="精选题库" value="精选题库"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="content-button">
          <el-button type="primary" @click="clickType">开始考试</el-button>
        </div>
      </div>
    </div>
    <modelExamList ref="modelExamList"></modelExamList>
  </div>
</template>

<script>
import {
  mockList,
  getSetting,
  mocksjList,
  mockWronglist,
  examList,
  clearwrong,
  mycollectq,
  mockclearcollect,
  getQcount,
} from "@/api/admin.js";
import { setExectSetting } from "@/utils/auth.js";
import { mapGetters } from "vuex";
import {
  getsubject_id,
  getsubjectTitle,
  getapplyid,
  getisfacetime,
  getisfacetimemkface,
  getLearnTime,
} from "@/utils/auth";
import modelExamList from "./modelExamList";
export default {
  computed: {
    ...mapGetters(["userinfor", "adminUserId", "nickname", "initObj"]),
  },
  components: {
    modelExamList,
  },
  data() {
    return {
      subject: "",
      radio3: "1",
      isPage: true,
      gz: "",
      subjectid: "",
      value: "不显示",
      form: "未答题优先",
      title_name: this.$route.meta.title,
      obj: {}, //考试配置
      ksInfo: "",
      loading: false,
      isMeaxr: "开启",
      pool: "",
      isShowJX: false,
      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
    };
  },
  methods: {
    //开始考试
    clickType() {
      if (this.ksInfo == "ctsj") {
        mockWronglist({
          subjectid: getsubject_id(),
          applyid: getapplyid(),
          form: this.form,
          applyid: getapplyid(),
        }).then((res) => {
          if (res.code == 200) {
            if (res.data.length == 0)
              return this.$message.error("您还没有错题,快去考试吧");
            this.$store.commit("SET_TI", res.data);
            this.$router.push(
              "/simulationExam?gz=" +
                this.gz +
                "&daan=" +
                this.value +
                "&jrType=ctsj" +
                "&subjectid=" +
                getsubject_id() +
                "&mockid="
            );
          }
        });
      } else if (this.ksInfo == "scsj") {
        mycollectq({
          subjectid: getsubject_id(),
          applyid: getapplyid(),
          form: this.form,
          applyid: getapplyid(),
        }).then((res) => {
          if (res.code == 200) {
            console.log(res);
            if (res.data.length == 0)
              return this.$message.error("您还没有收藏试题,快去收藏吧");
            this.$store.commit("SET_TI", res.data);
            this.$router.push(
              "/simulationExam?gz=" +
                this.gz +
                "&daan=" +
                this.value +
                "&jrType=scsj" +
                "&subjectid=" +
                getsubject_id() +
                "&mockid="
            );
          }
        });
      } else {
        if (this.form == "人工组卷") {
          this.$refs.modelExamList.open({
            applyid: getapplyid(),
            name: "模拟考试试卷",
            obj: this.obj,
            daan: this.value,
          });
        } else {
          if (
            getLearnTime() < 100 &&
            (this.http.indexOf("yingji") != -1 ||
              (this.http.indexOf("shuncheng") != -1 &&
                (this.gz == "特种作业" || this.gz == "安全管理")))
          ) {
            return this.$message.error("学时不足，无法参加模拟考试");
          }
          let face = "";
          if (getisfacetime()) {
            face = JSON.parse(getisfacetime()).face;
          } else if (getisfacetimemkface()) {
            face = JSON.parse(getisfacetimemkface()).face;
          }
          mockList({
            subjectid: this.subjectid,
            gz: this.gz,
            applyid: getapplyid(),
            form: this.form,
            face,
            pool: this.pool,
          }).then((res) => {
            if (res.code == 200) {
              if (res.data.list.length == 0)
                return this.$message.error("题库中没有试题，请联系管理员");
              this.$store.commit("SET_TI", res.data.list);
              this.$router.push(
                "/simulationExam?mockid=" +
                  res.data.mockid +
                  "&gz=" +
                  this.gz +
                  "&daan=" +
                  this.value +
                  "&subjectid=" +
                  getsubject_id()
              );
            }
          });
        }
      }
    },
    //查看试卷
    open_sj() {
      mocksjList({ subjectid: getsubject_id(), applyid: getapplyid() }).then(
        (res) => {
          if (res.code == 200) {
            this.$store.commit(
              "SET_MYSJLIST",
              Object.assign(res.data, { title_name: this.title_name })
            );
            this.$router.push("/mysjList/index");
          }
        }
      );
    },
    //错题试卷 考试
    ctsj() {
      this.isPage = !this.isPage;
      this.ksInfo = "ctsj";
    },
    //清除
    clearwrong() {
      this.loading = true;
      clearwrong({ subjectid: this.subjectid, applyid: getapplyid() }).then(
        (res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success("清除成功");
          }
        }
      );
    },
    clearSc() {
      this.loading = true;
      mockclearcollect({
        subjectid: this.subjectid,
        applyid: getapplyid(),
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$message.success("清除成功");
        }
      });
    },
    //收藏试题 考试
    scsj() {
      this.isPage = !this.isPage;
      this.ksInfo = "scsj";
    },
  },
  async created() {
    this.isMeaxr = JSON.parse(this.initObj.setting).mkExam
      ? JSON.parse(this.initObj.setting).mkExam
      : "开启";
    this.$store.commit("DEL_TI");
    this.subject = this.userinfor.filter(
      (item) => item.subject_id == getsubject_id()
    )[0].subject_id;
    this.subjectid = this.userinfor.filter(
      (item) => item.subject_id == getsubject_id()
    )[0].subject_id;
    this.gz = this.userinfor.filter(
      (item) => item.subject_id == getsubject_id()
    )[0].gz;
    await getSetting({ subjectid: this.subjectid, gz: this.gz }).then((res) => {
      if (res.code == 200) {
        let arr = ["初级", "中级", "高级", "技师"];
        if (
          this.gz == "职业技能等级认定" &&
          (this.http.indexOf("qdjsxy") != -1 ||
            this.http.indexOf("qiye") != -1 ||
            this.http.indexOf("testtjy") != -1)
        ) {
          arr.map((item) => {
            if (getsubjectTitle().indexOf(item) != -1) {
              this.obj = res.data.模拟考试[item];
            }
          });
        } else {
          this.obj = res.data.模拟考试;
        }
        setExectSetting(Object.assign(this.obj, { 考试类型: "模拟考试" }));
        this.form =
          this.obj.人工组卷 && this.obj.人工组卷 == "开启"
            ? "人工组卷"
            : "未答题优先";
      }
    });
    this.pool = "";
    getQcount({
      subjectid: this.subjectid,
      pool: "精选题库",
      applyid: getapplyid(),
    }).then((res) => {
      if (res.code == 200) {
        if (res.data.count > 0) {
          this.isShowJX = true;
          if (this.http.includes("yingji")) {
            this.pool = "精选题库";
          }
        } else {
          this.isShowJX = false;
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/utis.scss";
.app-container {
  height: calc(100vh - 50px) !important;
}
.backgroundClass {
  height: 100%;
}
.title_fontSize {
  // line-height: 32px;
  font-size: 18px;
}
.page_code {
  background: #fff;
  width: calc((100% - 72px) / 4);
  height: 166px;
  display: flex;
  flex-direction: column;
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .button_box {
    height: 50px;
    border-top: 1px solid #eee;
    line-height: 50px;
    span {
      display: inline-block;
      width: 50%;
      line-height: 1;
      text-align: center;
      cursor: pointer;
      color: #666666;
    }
  }
}
.titleBox {
  display: flex;
  min-width: 500px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 24px;
}
.content-box {
  margin: 0 auto;
  margin-top: 24px;
  width: 660px;
  min-height: 600px;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 32px 71px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .img_box {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 64px;
    }
    .span {
      padding: 24px 0;
      font-size: 18px;
    }
  }
  .content-box-title {
    padding: 7px 36px;
    background: #eaf7ed;
    margin-bottom: 24px;
    border-radius: 25px;
    span {
      color: #1dc7a3;
      font-size: 14px;
    }
  }
  .form {
    width: 50%;
  }
  .content-box-footer {
    padding: 16px 18px;
    background: #fef3f1;
    span {
      color: #f33e34;
      font-size: 16px;
    }
  }
  .content-button {
    margin-top: 50px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}
.el-form-item {
  margin-bottom: 24px;
}
.noneMargin {
  margin-bottom: 20px;
}
::v-deep {
  .is-disabled {
    .el-input__inner {
      color: #333;
    }
  }
}
</style>